import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppService } from '../../../services/app.service';
import { Router } from '@angular/router';
import { first } from 'rxjs';
import { SidebarComponent } from '../../../modules/sidebar/sidebar.component';
import { trigger } from '@angular/animations';

@Component({
  selector: 'app-add-plugins',
  standalone: true,
  imports: [SidebarComponent, RouterModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    HttpClientModule,],
  templateUrl: './add-plugins.component.html',
  styleUrl: './add-plugins.component.scss'
})
export class AddPluginsComponent implements OnInit {
  public URL: string = "http://localhost/REST_API/";

  public addPluginForm: FormGroup;
  public selectedImage!: File;
  public selectedFolder!: File;

  constructor(private fb: FormBuilder, private appService: AppService, private route: Router) {
    this.addPluginForm = this.fb.group({
      plugin_name: ['', Validators.required],
      plugin_detail: ['', Validators.required],
      price: ['', Validators.required],
    });

  }
  async ngOnInit() {

  }

  async onChangeImage(event: any) {
    this.selectedImage = event.target.files[0];
  }

  async uploadImage(name: any) {
    const form: HTMLFormElement | null = document.querySelector("form"),
    fileInput = form?.querySelector(".file-image");

    if (form && fileInput) {
      let xhr: XMLHttpRequest = new XMLHttpRequest();
      xhr.open("POST", this.URL + '/upload_image.php');
      let formData: FormData = new FormData(form);
      xhr.send(formData);
    }

  }

  async onChangeFolder(event: any) {
    this.selectedFolder = event.target.files[0];
  }

  async uploadFolder(name: any) {
    const form: HTMLFormElement | null = document.querySelector("form"),
    fileInput = form?.querySelector(".file-folder");

    if (form && fileInput) {
      let xhr: XMLHttpRequest = new XMLHttpRequest();
      xhr.open("POST", this.URL + '/upload_folder.php');
      let formData: FormData = new FormData(form);
      xhr.send(formData);
    }

  }

  async addPlugin(addPluginForm: any) {

    if (addPluginForm.valid) {
      this.appService.addPlugin(
        addPluginForm.value.plugin_name,
        addPluginForm.value.plugin_detail,
        addPluginForm.value.price,
        this.selectedImage.name,
        this.selectedFolder.name,
      ).pipe(first())
        .subscribe(data => {
          console.log(data);
          if (data.message == 'ADD Plugin Success') {
            alert('เพิ่ม Plugins สำเร็จ');
            this.route.navigate(['/admin-page']);
          }
          if (data.message == 'ADD Plugin Falied') {
            alert('เพิ่ม Plugins ไม่สำเร็จ');
          }
        }, error => {
          alert("เพิ่ม Plugins ไม่สำเร็จ");
        })
    }
    if (!addPluginForm.valid) {
      alert("กรุณากรอกให้ครบ");
    }
    this.uploadImage(this.selectedImage.name);
    this.uploadFolder(this.selectedFolder.name);
  }

}
